<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../JS/vue.js"></script>
</head>

<body>
  <!-- Vue的事件修饰符 
    1.prevent：阻止默认事件
    2.stop：阻止事件冒泡
    3.once：事件只触发一次
    4.capture：事件捕获
    5.self：事件只能触发自己本身
    6.passive：事件不阻止默认事件，但会阻止默认事件
    7.native：事件修饰符，修饰根组件上的原生事件
    8.exact：精确匹配修饰符，只有同时满足修饰符才触发事件
    
-->
  <div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <a href="http://www.atguigu.com" @click.prevent="showName">点我提示新信息</a>
  </div>

</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷'
    },
    methods: {
      showName(e) {
        alert('showName')
        // return false
        // return true
      }
    }
  })
</script>

</html>